<div>
    <p class="basicInfo">
        远程布局分析及上传
    </p>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="UI选择器:" class="width50">
                <el-checkbox-group v-model="remoteHandler.param5.uiSelect">
                    <el-checkbox label="id">
                        id选择器
                    </el-checkbox>
                    <el-checkbox label="text">
                        text选择器
                    </el-checkbox>
                    <el-checkbox label="desc">
                        desc选择器
                    </el-checkbox>
                    <el-checkbox label="className">
                        className选择器
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="选择器条件:" class="width50">
                <el-radio-group v-model="remoteHandler.param5.uiSelectCondition">
                    <el-radio label="findOne">
                        找到一个(阻塞)findOne
                    </el-radio>
                    <el-radio label="findOnce">
                        找到第N个findOnce
                    </el-radio>
                    <el-radio label="untilFind">
                        找到所有untilFind
                    </el-radio>
                    <el-radio label="waitFor">
                        等待出现waitFor
                    </el-radio>
                    <el-radio label="exists">
                        存在exists
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="动作:" class="width50">
                <el-radio-group v-model="remoteHandler.param5.uiSelectAction">
                    <el-radio label="click">
                        点击click
                    </el-radio>
                    <el-radio label="clickCenter">
                        点击中心clickCenter
                    </el-radio>
                    <el-radio label="longClick">
                        长按longClick
                    </el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="布局分析范围:" label-width="140px" class="width50">
                <el-radio-group v-model="remoteHandler.param5.layoutAnalysisRange">
                    <el-radio label="active">
                        活跃窗口
                    </el-radio>
                    <el-radio label="all">
                        全部窗口(限制应用暂不支持)
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="代码预览:" class="width60">
                <el-input type="textarea" v-model="remoteHandler.param5.scriptPreview"
                          :rows="5" placeholder="请点击控件后生成代码" class="width100">
                </el-input>
            </el-form-item>
            <el-form-item label="控件信息:" class="width40">
                <el-input type="textarea" v-model="remoteHandler.param5.nodeInfo" :rows="5"
                          placeholder="点击控件信息快速获取文本内容" class="width100">
                </el-input>
            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center" style="margin-bottom:10px;display: flex;justify-content: flex-start;align-items: center;text-align: center;">
            <div>
                <el-button type="danger" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="remoteLayoutAnalysisOneKey">
                    一键远程布局分析
                </el-button>
                <el-button type="danger" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="remoteLayoutAnalysis">
                    远程布局分析
                </el-button>
                <el-button type="danger" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="remoteLimitLayoutAnalysis">
                    远程限制应用布局分析
                </el-button>
                <el-button type="danger" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="uploadAndLoadNodeJson">
                    上传布局分析并解析
                </el-button>
                <el-button type="danger" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="loadNodeJson">
                    解析布局分析
                </el-button>
                <el-button type="primary" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="clearNodeJson(true)">
                    清空布局分析
                </el-button>
                <el-button type="danger" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="execNodePreviewScript">
                    执行代码
                </el-button>
                <el-button type="primary" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="clearNodePreviewScript">
                    清空代码
                </el-button>

                <el-dropdown trigger="click">
                    <el-button type="primary" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                               size="mini">
                        常见自定义过滤函数
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in commonCustomFilterFunction" @click.native.prevent.stop="generateCommonCustomFilterFunction(item.code)">
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <el-button type="primary" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="saveCustomFilterFunction">
                    保存自定义过滤函数
                </el-button>
                <el-button type="primary" style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                           size="mini" @click.stop.prevent="loadCustomFilterFunction">
                    加载自定义过滤函数
                </el-button>
            </div>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center">
            <el-form-item label="自定义过滤函数:" class="width100">
                <el-input type="textarea" v-model="remoteHandler.param5.filterFunction"
                          :rows="5" placeholder="请编写例如：(dataArr)=>{return dataArr;}的自定义处理函数,其中dataArr表示全部的节点数据" class="width100">
                </el-input>
            </el-form-item>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center" style="display: flex;justify-content: flex-start;align-items: center;text-align: center;">
            <div>
                <el-checkbox style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px"
                             v-model="remoteHandler.param5.checkAll" @change="checkAllNode">
                    全选
                </el-checkbox>
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px">
                    <span style="margin-right: 5px;">
                        开启自定义过滤函数处理
                    </span>
                    <el-switch v-model="remoteHandler.param5.openCustomFilterFunction" @change="openCustomFilterFunctionChange" />
                </div>
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px">
                    <span style="margin-right: 5px;">
                        父子不相关联
                    </span>
                    <el-switch v-model="remoteHandler.param5.checkStrictly" />
                </div>
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px">
                    <span style="margin-right: 5px;">
                        只显示可见控件
                    </span>
                    <el-switch v-model="remoteHandler.param5.isOnlyShowVisible" @change="onlyShowVisible"
                    />
                </div>
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px">
                    <span style="margin-right: 5px;">
                        只显示屏幕范围内控件
                    </span>
                    <el-switch v-model="remoteHandler.param5.isOnlyShowInScreen" @change="onlyShowInScreen"
                    />
                </div>
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px">
                    <span style="margin-right: 5px;">
                        绘制背景图片
                    </span>
                    <el-switch v-model="remoteHandler.param5.isShowBgImg" @change="showDrawBgImg"
                    />
                </div>
                <div style="display: inline-flex;justify-content: flex-end;align-items: center;margin-left:10px">
                    <span style="margin-right: 5px;">
                        点击生成代码
                    </span>
                    <el-switch v-model="remoteHandler.param5.openClickGenerateCode" />
                </div>
            </div>
        </div>
    </el-row>
    <el-row>
        <div class="width100 d-flex a-center mt-1" v-loading="layoutLoading">
            <el-tree :data="rootNodeObjArr" :props="remoteHandler.param5.defaultProps"
                     empty-text="请先上传控件或加载控件" default-expand-all :highlight-current="true" ref="nodeTree" :expand-on-click-node ="false"
                     :show-checkbox="true" node-key="nodeKey" :check-on-click-node="false" :filter-node-method="filterNode"
                     :default-expanded-keys="defaultExpandedKeys" :check-strictly="remoteHandler.param5.checkStrictly" @check="nodeCheckFun"
                     @node-click="nodeClickFun" @current-change="currentChangeFun" class="nodeTreeClass nodeDivCommon">
            </el-tree>
            <div class="nodePreviewClass nodeDivCommon">
                <img id="nodePreviewImg" draggable="false" style="display: none;" />
                <canvas v-if="remoteHandler.param5.rootNodeJson" id="nodePreviewCanvas"
                        style="width: 100%;margin: 0; padding: 0;">
                </canvas>
                <div v-else style="width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #909399;">
                    请先上传控件或加载控件
                </div>
            </div>
            <div class="nodeDetailDiv nodeDivCommon">
                <template v-if="remoteHandler.param5.dialogVisible">
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            className:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.className }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            packageName:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.packageName }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            text:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.text }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            desc:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.desc }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            id:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.id }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            sourceNodeId:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.sourceNodeId }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            bounds:
                        </div>
                        <div class="contentClass">
                            {{ '['+remoteHandler.param5.selectNode.boundsInfo.left+','+
                            remoteHandler.param5.selectNode.boundsInfo.top+',' +
                            remoteHandler.param5.selectNode.boundsInfo.right + ',' +
                            remoteHandler.param5.selectNode.boundsInfo.bottom + ']' }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            boundsInParent:
                        </div>
                        <div class="contentClass">
                            {{ '['+remoteHandler.param5.selectNode.boundsInParent.left+','+
                            remoteHandler.param5.selectNode.boundsInParent.top+',' +
                            remoteHandler.param5.selectNode.boundsInParent.right + ',' +
                            remoteHandler.param5.selectNode.boundsInParent.bottom + ']' }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            indexInParent:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.indexInParent }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            depth:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.depth }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            checkable:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.checkable }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            checked:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.checked }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            focusable:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.focusable }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            focused:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.focused }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            accessibilityFocused:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.accessibilityFocused }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            selected:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.selected }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            clickable:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.clickable }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            drawingOrder:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.drawingOrder }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            longClickable:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.longClickable }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            enabled:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.enabled }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            password:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.password }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            scrollable:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.scrollable }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            visible:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.visible }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            column:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.column }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            columnCount:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.columnCount }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            columnCount:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.columnCount }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            columnSpan:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.columnSpan }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            row:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.row }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            rowCount:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.rowCount }}
                        </div>
                    </el-row>
                    <el-row class="nodeDetailRow">
                        <div class="labelClass">
                            rowSpan:
                        </div>
                        <div class="contentClass">
                            {{ remoteHandler.param5.selectNode.rowSpan }}
                        </div>
                    </el-row>
                </template>
                <template v-else>
                    <div style="width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #909399;">
                        请点击控件节点或者图中矩形
                    </div>
                </template>
            </div>
        </div>
    </el-row>
</div>